<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>

    <title>在线预约</title>

    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>
    <script src="/js/vue.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <style>
        html{height: 100%;}
        body{height: 100%;}
        .appointment_card {
            margin: 10px 17px 0;
            box-shadow: 0 1px 2px 1px rgba(51, 51, 51, 0.1), 1px 3px 4px 2px rgba(51, 51, 51, 0.07);
            border-radius: 6px;
        }


        .appointment_title {
            margin: 0px 15px 0px;
            border-bottom: 2px solid rgba(192, 192, 192, 0.5);
            padding: 10px 10px 5px;
            color: #666666;
        }

        .appointment_content {
            display: flex;
            flex-direction: column;
            padding: 5px 20px;
        }
        .appointment_item{
            display: flex;
            flex-direction: row;
            color: #707070;
            align-items: center;
        }
        .icon_time{background: transparent url("/images/icon_time.png") no-repeat; background-size: 100%;width: 18px;height: 18px;margin-right: 12px;}
        .icon_hall{background: transparent url("/images/icon_location.png") no-repeat; background-size: 100%;width: 18px;height: 18px;margin-right: 12px;}
        .icon_service{background: transparent url("/images/icon_service.png") no-repeat; background-size: 100%;width: 18px;height: 18px;margin-right: 12px;}

        .appointment_operation{min-height: 20px;margin: 5px 20px;border-top: 2px solid rgba(192,192,192,0.5);display: flex;font-size: 16px;color: #1876ce;}

        .appointment_operation_button_left{flex: 1;margin: 10px 0;border-right: 2px solid rgba(192,192,192,0.5);justify-content: center;display: flex;align-items: center;color: #1876ce;}
        .appointment_operation_button_right{flex: 1;margin: 10px 0;justify-content: center;display: flex;align-items: center;color: #8a8a8a;}
        .icon_map{background:transparent url("/images/icon_map.png") no-repeat;height: 20px;width: 20px;margin-right: 5px; background-size: 100%;align-items: center;}
        .icon_delete{background:transparent url("/images/icon_delete.png") no-repeat;height: 20px;width: 20px; margin-right: 5px;background-size: 100%; align-items: center;}

    </style>
</head>
<body>
<div class="page" id="app">
    <a href="/appointment/add/page" class="weui-btn weui-btn_primary" style="margin: 10px 15px;">
        <i id="icon_add_apply"></i>添加新预约</a>

    <div class="appointment_card" v-for="app in appointmentList">
        <div class="appointment_title">
            {{app.realName}}
        </div>
        <div class="appointment_content">
            <div class="appointment_item"><i class="icon_time"></i> <span>{{app.timeName}}</span></div>
            <div class="appointment_item"><i class="icon_hall"></i> <span>{{app.hallName}}</span></div>
            <div class="appointment_item"><i class="icon_service"></i> <span>{{app.serviceName}}</span></div>
        </div>
        <div class="appointment_operation">
            <div class="appointment_operation_button_left" onclick="show404();">
                <i class="icon_map"></i>
                查看导航
            </div>
            <div class="appointment_operation_button_right" onclick="show404()">
                <i class="icon_delete"></i>
                取消预约
            </div>

        </div>
    </div>
    <div v-bind:class="['weui-loadmore','weui-loadmore_line',{'hidden_div':loadMoreDisplay}]">
        <span class="weui-loadmore__tips">暂无数据</span>
    </div>


</div>

<div class="js_dialog" id="iosDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd" id="dialogContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:hideDialog();" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            appointmentList: []
        },
        created: function () {
            var that = this;
            $.post("/appointment/list", {}, function (res) {
                that.appointmentList = res;
            });
        },
        computed: {
            loadMoreDisplay:function () {
                return this.appointmentList.length!=0;
            }
        }

    });

</script>
</body>
</html>